<template>
    <div class="video-container">
        <div :id="videoId" ref="videoPlayers"></div>
    </div>
</template>

<script>
import { getEZopenToken } from '../../api/http.api';
import  EZUIKit from 'ezuikit-js';
export default {
    data(){
        return {
            playr: null,
        }
    },
    props: {
        src: {
            type: String,
            default: ""
        },
        spilt:{
            type: Number,
            default: ""   
        },
        videoVoice:{
            type:Boolean,
            default: true
        }
    },
    watch:{
        src:{
            handler(v){
                // 切换视频地址
                this.playr.stop().then((item)=>{
                    this.playr.play({url:v.split('?')[0],accessToken:v.split('?')[1]});
                    if(this.videoVoice){
                        this.playr.openSound()
                    }else{
                        this.playr.closeSound()
                    }
                }).catch(err => {
                    this.StructureEZUIKitPlayer()
                });
            },
        },
        spilt(){
            this.playr.stop()
            this.StructureEZUIKitPlayer()
        },
        videoVoice(v){
            if(v){
                this.playr.openSound()
            }else{
                this.playr.closeSound()
            }
        }
    },
    created(){
        this.videoId = Number(
            Math.random()
                .toString()
                .substr(3, 12) + Date.now()
        ).toString(36);
    },
    mounted(){
        this.$nextTick(()=>{
            // 初始化
            setTimeout(() => {
                this.StructureEZUIKitPlayer()
            }, 100);
        })
    },
    methods:{
        StructureEZUIKitPlayer(){
            let token = ''
            var EZOPENDemo;
            window.EZOPENDemo = EZOPENDemo;
            var width = document.getElementsByClassName('video-container')[0].offsetWidth;
            var height = document.getElementsByClassName('video-container')[0].offsetHeight;
            // 获取token
                let src = this.src.split('?')
                console.log(src)
                this.playr = new EZUIKit.EZUIKitPlayer({
                    id: this.videoId,
                    width: width,
                    height: height,
                    autoplay: 1,
                    audio: 1,
                    template: "security",
                    url: src[0],
                    accessToken: src[1],
                    plugin: ['talk']
                });
        },
    },
    beforeDestroy() {
        // 视频暂停
        this.playr.stop();
        document.getElementById(this.id).innerHTML = ""
    }
}
</script>

<style scoped lang="scss">
.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000000;
}
</style>